<template>
    <a-form ref="formRef" :label-col='{span : 5}' :model="formData">
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' :maxlength="30" show-count />
        </a-form-item>
        <a-form-item label='设备类型' name='deviceTypeId' :rules="[{required : true, message : '请选择设备类型'}]">
            <a-tree-select show-search v-model:value='formData.deviceTypeId' :tree-data='deviceTypeOptions' :field-names='{children : "children", label : "name", value : "id"}' @change="onChangeDeviceType"></a-tree-select>
        </a-form-item>
        <template v-for="(field, index) in paramsFields" :key="index">
            <a-form-item :label='field.name' :name="['params', field.key]" :rules="[{required : true, message : '请填写' + field.name}]">
                <a-input v-if="field.inputType == 'input'" type='text' v-model:value='formData.params[field.key]'>
                    <template v-if="field.unit" #addonAfter>{{ field.unit }}</template>
                </a-input>
                <a-input-number v-else-if="field.inputType == 'number'" v-model:value.number='formData.params[field.key]'>
                    <template v-if="field.unit" #addonAfter>{{ field.unit }}</template>
                </a-input-number>
                <a-select v-else-if="field.inputType == 'select'" v-model:value='formData.params[field.key]' :options="field.options"></a-select>
            </a-form-item>
        </template>
    </a-form>
</template>

<script lang="ts" setup>
import { deviceTypeOptionsApi, getParamsFieldApi } from '@/api/devices/DeviceType';
    import { saveApi } from '@/api/deviceParams';
import { recursionFn } from '@/utils';
    import { ref } from 'vue';
    
    const props = defineProps<{
        row? : any
    }>()

    const formRef = ref()

    const deviceTypeOptions = ref<any[]>([])
    const paramsFields = ref<any[]>([])

    const formData = ref({
        id : 0,
        name : '',
        deviceTypeId : '',
        params : {},
    })

    if(props.row) {
        onChangeDeviceType(props.row.deviceTypeId)
        for(let k in props.row) {
            if(props.row[k] !== null) {
                if(k in formData.value) {
                    formData.value[k] = props.row[k]
                }
            }
        }

    }

    function onChangeDeviceType(id:number) {
        getParamsFieldApi(id).then(r => {
            if(r.data) {
                paramsFields.value = r.data
            }
        })
    }

    async function submit() {
        let params  = await formRef.value.validate()
       
        const res = await saveApi(params)
        
        return res
        
        
    }

    defineExpose({
        submit
    })


    deviceTypeOptionsApi().then(r => {
        if(r.data) {
            deviceTypeOptions.value = recursionFn(r.data, 0, 'id', 'parentId', 'children')
        }
    })

</script>